<template>
  <div class="main">
    <el-dialog title="添加训练" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="formInAddDialog" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="formInAddDialog.name"></el-input>
        </el-form-item>
        <el-form-item label="市场">
          <el-radio-group v-model="formInAddDialog.market">
            <el-radio :label="0">随机</el-radio>
            <el-radio :label="1">股票</el-radio>
            <el-radio :label="3">期货</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="code">
          <el-input v-model="formInAddDialog.code"></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="开始日期" v-model="formInAddDialog.beginDate"
              style="width: 100%"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">至</el-col>
          <el-col :span="11">
            <el-date-picker type="date" placeholder="结束日期" v-model="formInAddDialog.endDate"
              style="width: 100%"></el-date-picker>
          </el-col>
          <el-col :span="11">
            <el-switch v-model="switchToTransactionPage" active-text="是否跳转到交易页面">
            </el-switch>
          </el-col>
        </el-form-item>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmitAdd" v-loading.fullscreen.lock="fullScreenLoading">确
          定</el-button>
      </el-form>
    </el-dialog>
    <el-row>
      <el-form :model="formInSearch" label-width="80px">
        <el-col :span="12">
          <el-form-item label="名称">
            <el-input v-model="formInSearch.name" placeholder="名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="handleShowAddDialog">添加</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="trainingData" border style="width: 100%">
        <el-table-column prop="Name" label="名称" width="200"> </el-table-column>
        <el-table-column prop="Market" label="市场" width="60"> </el-table-column>
        <el-table-column prop="Code" label="代码" width="250"> </el-table-column>
        <el-table-column prop="StatusDescription" label="状态" width="80"> </el-table-column>
        <el-table-column prop="BeginDate" label="开始时间" width="120"> </el-table-column>
        <el-table-column prop="EndDate" label="结束时间" width="120"> </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间" width="200"> </el-table-column>
        <el-table-column prop="UpdateTime" label="更新时间" width="200"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.Status == TrainingStatus.END" @click="handleStartOrResumeTraining(scope.row)" type="text" size="small">开始/继续</el-button>
            <el-button @click="handleAnalysisTraining(scope.row)" type="text" size="small">分析</el-button>
            <el-button :disabled="scope.row.Status == TrainingStatus.END" @click="handleStopTraining(scope.row)" type="text" size="small">结束</el-button>
            <el-button @click="handleDeleteTraining(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <div class="pagination">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="paging.pageNo"
        :page-size="paging.pageSize" :page-sizes="paging.pageSizes" :total="paging.pageTotal"
        @size-change="handleSizeChange" @current-change="handlePageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { add, page, stopTraining, deleteTraining } from "@/api/training_api.js";
import { TrainingStatus } from '@/components/constants.js';
export default {
  name: "Training",
  data() {
    return {
      /**
       * 是否显示对话框
       */
      dialogVisible: false,
      /**
       * 是否全屏loading
       */
      fullScreenLoading: false,
      /**
       * 表单参数
       */
      formInAddDialog: {
        /**
         * 名称
         */
        name: null,
        /**
         * 市场
         */
        market: 0,
        /**
         * 股票/期货代码
         */
        code: null,
        /**
         * 开始日期
         */
        beginDate: null,
        /**
         * 结束日期
         */
        endDate: null,
      },
      /**
       * 是否跳转到交易页面
       */
      switchToTransactionPage: true,
      /**
       * 表格的数据
       */
      trainingData: [],
      /**
       * 表格搜索
       */
      formInSearch: {
        /**
         * 名称
         */
        name: null,
      },
      /**
       * 训练状态：1表示未开始，2表示已经开始，3表示已经结束
       */
      TrainingStatus: TrainingStatus,
      /**
       * 训练的状态
       */
      trainingStatus: TrainingStatus.NO_START,
      /**
       * 分页显示
       */
      paging: {
        /**
         * 第几页
         */
        pageNo: 1,
        /**
         * 每页有几行
         */
        pageSize: 5,
        /**
         * 总记录数
         */
        pageTotal: 0,
        /**
         * 页码类型
         */
        pageSizes: [5, 10, 20, 30]
      },
    };
  },
  mounted() {
    this.handleSearch();
  },
  methods: {
    /**
     * 显示添加训练记录的对话框
     */
    handleShowAddDialog() {
      this.dialogVisible = true;
    },
    /**
     * 添加训练记录
     */
    handleSubmitAdd() {
      this.fullScreenLoading = true;
      
      // this.formInAddDialog.beginDate = moment(this.formInAddDialog.beginDate).format('YYYY-MM-DD');
      // this.formInAddDialog.endDate = moment(this.formInAddDialog.endDate).format('YYYY-MM-DD');

      let that = this;

      add(this.formInAddDialog).then((res) => {
        that.fullScreenLoading = false;
        if (res.data.Success == true) {
          if (that.switchToTransactionPage == true) {
            that.$store.commit("changeActiveIndexInNavigationBar", "2");
            that.$router.push({
              name: "Transaction",
              query: { name: this.formInAddDialog.name },
            });
          }
        } else {
          console.error(`调用接口/api/v1/trainingInfo/add报错：${res.data.Message}`);
        }
        that.dialogVisible = false;
      });
    },
    /**
     * 搜索
     */
    handleSearch() {
      this.fullScreenLoading = true;
      let that = this;
      page({
        name: this.formInSearch.name,
        pageNo: this.paging.pageNo,
        pageSize: this.paging.pageSize,
      }).then((res) => {
        that.fullScreenLoading = false;
        if (res.data.Success == true) {
          that.trainingData = res.data.Result.Data;
          that.paging.pageTotal = res.data.Result.Total;
        } else {
          console.error(`调用接口/api/v1/trainingInfo/page报错：${res.data.Message}`);
        }
      });
    },
    /**
     * 开始/继续
     */
    handleStartOrResumeTraining(row) {
      this.trainingStatus = TrainingStatus.STARTING;
      this.$store.commit("changeActiveIndexInNavigationBar", "2");
      this.$router.push({
        name: "Transaction",
        query: { name: row.Name },
      });
    },
    /**
     * 结束
     */
    handleStopTraining(row) {
      this.trainingStatus = TrainingStatus.END;
      stopTraining(row.Name).then((res) => {
        if (res.data.Success == true) {
          this.handleSearch();
        } else {
          console.error(`调用接口/api/v1/trainingInfo/stopTraining报错：${res.data.Message}`);
        }
      });
    },
    /**
     * 删除
     */
    handleDeleteTraining(row) {
      deleteTraining(row.Name).then((res) => {
        if (res.data.Success == true) {
          this.handleSearch();
        } else {
          console.error(`调用接口/api/v1/trainingInfo/deleteTraining报错：${res.data.Message}`);
        }
      });
    },
    /**
     * 分析
     */
    handleAnalysisTraining(row) {
      this.$store.commit("changeActiveIndexInNavigationBar", "3");
      this.$router.push({
        name: "Analysis",
        query: { name: row.Name },
      });
    },
    /**
     * 点击下一页时
     * @param currentPage 
     */
    handlePageChange(currentPage) {
      this.paging.pageNo = currentPage
      this.handleSearch();
    },
    /**
     * 每一页的行数变化时
     * @param pageSize 
     */
    handleSizeChange(pageSize) {
      this.paging.pageSize = pageSize
      this.handleSearch();
    }
  },
};
</script>

<style scoped>
/* body {
  background-color: #e9eef3;
} */

.main {
  /* background-color: #e9eef3; */
  background-color: white;
}
</style>
